<template>
  <div style="padding: 20px">
    <el-tabs type="border-card">
      <el-tab-pane label="管理员列表">
        <el-table :data="selAdminLists" style="width: 100%">
          <el-table-column prop="id" label="ID" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="username"
            label="登录名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="最后登录时间"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              {{ scope.row.lastLoginTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column
            prop="lastLoginIp"
            label="最后登录IP"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="editManageClick(scope.row)"
                >编辑</el-button
              >
              <el-button size="small" @click="loginLogDialog = true"
                >登录日志</el-button
              >
              <el-button size="small" @click="operateLogDialog = true"
                >操作日志</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="lockClick(scope.row)"
                >{{ scope.row.status ? "锁定" : "解锁" }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="10" justify="end" style="margin-top: 10px" type="flex">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="paramsQuery.pagesize"
            :current-page="paramsQuery.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-row>
        <!-- <el-button
          type="primary"
          style="margin-top: 20px"
          size="small"
          @click="addManageDialog = true"
          >添加</el-button
        > -->
      </el-tab-pane>
    </el-tabs>
    <addManage :addManageDialog.sync="addManageDialog" />
    <editManage ref="editManageRef" :editManageDialog.sync="editManageDialog" />
    <loginLog :loginLogDialog.sync="loginLogDialog" />
    <operateLog :operateLogDialog.sync="operateLogDialog" />
  </div>
</template>

<script>
import addManage from "@/views/platformSystem/administrators/manage/components/addManage";
import editManage from "@/views/platformSystem/administrators/manage/components/editManage";
import loginLog from "@/views/platformSystem/administrators/manage/components/loginLog";
import operateLog from "@/views/platformSystem/administrators/manage/components/operateLog";
import {
  selAdminListApi,
  selAdminByIdApi,
  updateAdminStatusByIdApi,
} from "@/api/system";
export default {
  components: {
    addManage,
    editManage,
    loginLog,
    operateLog,
  },
  data() {
    return {
      addManageDialog: false,
      editManageDialog: false,
      loginLogDialog: false,
      operateLogDialog: false,
      paramsQuery: {
        page: 1,
        pagesize: 10,
      },
      selAdminLists: [],
      editManageList: {},
    };
  },
  created() {
    this.selAdminList();
  },
  methods: {
    // 锁定和解锁
    async lockClick(row) {
      console.log(row);
      if (row.status === 0) {
        this.$confirm(`此操作将解锁管理员${row.username},是否继续？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            try {
              const res = await updateAdminStatusByIdApi(row.id);
              console.log(res);
              if (res.code === 1) {
                this.$message.success("管理员解锁成功");
                this.selAdminList();
              } else {
                this.$message.error("管理员解锁失败");
              }
            } catch {
              this.$message.error("管理员解锁失败");
            }
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消删除",
            // });
          });
      } else {
        this.$confirm(
          `当前管理员${row.username},锁定后将自动释放且无法登录管理后台,是否继续？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            try {
              const res = await updateAdminStatusByIdApi(row.id);
              console.log(res);
              if (res.code === 1) {
                this.$message.success("管理员锁定成功");
                this.selAdminList();
              } else {
                this.$message.error("管理员锁定失败");
              }
            } catch {
              this.$message.error("管理员锁定失败");
            }
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消删除",
            // });
          });
      }
    },
    // 查询管理员列表
    async selAdminList() {
      const res = await selAdminListApi(this.paramsQuery);
      console.log(res);
      this.selAdminLists = res.records;
      this.total = res.total;
    },
    // 编辑管理员
    async editManageClick(row) {
      try {
        const res = await selAdminByIdApi(row.id);
        console.log(res);

        if (res.code === 1) {
          this.$refs.editManageRef.formData = res.data;
          this.editManageDialog = true;
        } else {
          this.$message.error("编辑失败");
        }
      } catch {}
    },
  },
};
</script>

<style lang="scss" scoped></style>
